
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高度最大适应 - 数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">

  <!--jquery-->
  <script src="../../statics/libs/jquery.min.js"></script>

</head>
<body style="background-color: #FFFFFF">

<div class="layui-fluid" id="component-tabs">
  <div class="layui-row">
    <div class="layui-col-md12">
      <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
        <ul class="layui-tab-title">
          <li class="layui-this">基本资料</li>
          <li>详细资料</li>
        </ul>
        <div class="layui-tab-content">

            <div class="layui-tab-item layui-show">
              <form class="layui-form" action="" lay-filter="">

                <div class="layui-form-item">
                  <label class="layui-form-label">姓名</label>
                  <div class="layui-input-inline">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">性别</label>
                  <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">手机</label>
                    <div class="layui-input-inline">
                      <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">部门</label>
                  <div class="layui-input-block">
                    <input type="text" id="dept" lay-verify="title" autocomplete="off" placeholder="" class="layui-input" readonly>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">职位</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">工号</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">邮箱</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">地址</label>
                  <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                  </div>
                </div>

              </form>
            </div>


          <div class="layui-tab-item">
            <form class="layui-form" action="" lay-filter="form-detail">
              <div class="layui-form-item">
                  <label class="layui-form-label">生日</label>
                  <div class="layui-input-inline">
                    <input type="text" name="date" id="day1" lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
                  </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">民族</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">婚姻状况</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">子女</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">家庭住址</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">紧急联系人</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">紧急联系人电话</label>
                <div class="layui-input-block">
                  <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">毕业日期</label>
                <div class="layui-input-inline">
                  <input type="text" name="date" id="day2" lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">入职日期</label>
                <div class="layui-input-inline">
                  <input type="text" name="date" id="day3" lay-verify="date" placeholder="" autocomplete="off" class="layui-input">
                </div>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'laydate'], function(){
    var admin = layui.admin
    ,table = layui.table
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,$ = layui.jquery;

      laydate.render({
          elem: '#day1'
      });
      laydate.render({
          elem: '#day2'
      });
      laydate.render({
          elem: '#day3'
      });

    //data用于传参到子窗口
      data = {
          isMulti:false //部门树是否多选
      };

    function selectDept(){
        layer.open({
            type: 2,
            area: [, '400px'],
            title: '选择部门',
            content: '../common/selectDeptDialog.html' //iframe的url，no代表不显示滚动条

            ,btn: ['确定', '取消']
            ,yes: function(index, layero){
                var iframeWin = window[layero.find('iframe')[0]['name']];
                var checkedNodes = iframeWin.getCheckedNodes();//调用子窗口方法

                $("#dept").val(checkedNodes[0].name);
                layer.close(index);
            }

            ,btn2: function(index, layero){
                //do something
                layer.close(index);
            }

        });
    }
    $(document).ready(function(){
        $("#dept").bind("click", selectDept);
    });

    
  });




  </script>
</body>
</html>